import React, { Component } from 'react';
import { Input, Select, Button, Checkbox, Form, DatePicker } from 'antd';
import Utils from './../../utils/utils';
const FormItem = Form.Item;

class FilterForm extends Component {
	formRef = React.createRef();
	handleFilterSubmit = () => {
		let fieldsValue = this.formRef.current.getFieldsValue();
		this.props.filterSubmit(fieldsValue);
	}
	onReset = () => {
		this.formRef.current.resetFields();
	};
	initFormList = ()=>{
		const formList = this.props.formList;
		const formItemList = [];
		if(formList && formList.length > 0){
			formList.forEach((item,index)=>{
				let label = item.label;
				let field = item.field;
				let placeholder = item.placeholder;
				let width = item.width;
				if(item.type === "INPUT"){
					const INPUT = <FormItem
						key={field}
						label={label}
						name={field}
					>
						<Input type="text" placeholder={placeholder} />
					</FormItem>
					formItemList.push(INPUT)
				}else if(item.type === "SELECT"){
					const SELECT = <FormItem
						key={field}
						label={label}
						name={field}
					>
						<Select
							placeholder={placeholder}
							style={{width: width}}
						>
							{ Utils.getOptionList(item.list) }
						</Select>
					</FormItem>
					formItemList.push(SELECT)
				}else if(item.type === "CHECKBOX"){
					const CHECKBOX = <FormItem
						key={field}
						label={label}
						name={field}
						valuePropName= 'checked'
					>
						<Checkbox>
							
						</Checkbox>
					</FormItem>
					formItemList.push(CHECKBOX)
				}else if(item.type === "时间查询"){
					const TIME = <FormItem
						key={field}
						label={item.type}
						name={field}
						colon={false}
					>
						<DatePicker showTim />
					</FormItem>
					formItemList.push(TIME)
				}else if(item.type === "datepicker"){
					const Date = <FormItem
						key={field}
						label={item.type}
						name={field}
					>
						<DatePicker showTim />
					</FormItem>
					formItemList.push(Date)
				}
			})
		}
		return formItemList;
	}
	render(){
		const tailLayout = {
			wrapperCol: {
				offset: 6,
				span: 18,
			},
		};
		return (
			<Form
				ref={this.formRef}
				layout="inline"
			>
				{this.initFormList()}
				<FormItem {...tailLayout}>
					<Button type="primary" onClick={this.handleFilterSubmit}>查询</Button>
					<Button onClick={this.onReset}>
						重置
					</Button>
				</FormItem>
			</Form>
		)
	}
}

export default FilterForm;